HTML Pre Element

The HTML <pre> element stands for preformatted text. It preserves white spaces, line breaks, and indentation exactly as written in the HTML file. This is useful for:

✔️ Displaying code snippets

✔️ Keeping formatted text intact

✔️ Showing ASCII art or structured content

The <pre> element is a block-level tag, meaning it takes up the full width available. It requires both an opening and closing tag:

<!DOCTYPE html>
<html>
<body>
<pre>
This is preformatted text.
Indentation and spaces    are preserved.
</pre>
</body>
</html>

Usage of <pre>

Displaying Code Snippets

The <pre> element is often combined with <code> for displaying programming code:

<!DOCTYPE html>
<html>
<body>
<pre>
<code>
function greet() {
console.log("Hello, world!");
}
</code>
</pre>
</body>
</html>

Keeping Text Formatting

<!DOCTYPE html>
<html>
<body>
<pre>
Line 1: Keep formatting
Line 2:     Spaces are not removed
Line 3: Line breaks are kept
</pre>
</body>
</html>

ASCII Art Representation

<!DOCTYPE html>
<html>
<body>
<pre>
/\_/\
( o.o )
> ^_^ <
</pre>
</body>
</html>

ASCII art is displayed correctly because spaces and alignment are maintained.

The <pre> element is fully supported in all modern browsers.

Limitations of <pre>

The text inside <pre> does not wrap by default, causing horizontal scrolling for long lines.

It cannot be styled effectively for large amounts of text.

Not ideal for mobile-friendly designs without additional CSS.

Best Practices

Use CSS to handle text wrapping:
pre { white-space: pre-wrap; /* Allows text to wrap / word-wrap: break-word; / Ensures long words break properly */ }

Use <code> inside <pre> when displaying code:
`let x = 10; console.log(x);`

Avoid using <pre> for large amounts of text, as it affects readability.

The <pre> element is essential for preserving text formatting, making it useful for displaying code, structured text, and ASCII art. However, it should be used carefully in responsive designs, and CSS should be applied to improve usability.